<div class="layui-form" id="form" lay-filter="game_form">
    <div class="form-cont">
        <div class="layui-form-item verify">
            <label class="layui-form-label">活动名称</label>
            <div class="layui-input-block" style="margin-left: 0px;width:280px;float:left;">
                <input type="game_name" verify="require" v-model="detail.game_name" placeholder="请输入名称"
                       class="layui-input">
                <span class="hint">活动名称必填</span>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">排名</label>
            <div class="layui-input-block" style="margin-left: 0px;width:180px;float:left;">
                <input type="num" verify="require" v-model="detail.ranking" placeholder="请输入排名"
                       oninput="if(value>8)value=8" class="layui-input">
                <span class="hint">活动名次必填</span>
            </div>
            <label class="layui-form-label" style="margin-left: 0px;width:80px;">赠送网费</label>
            <input type="number" v-model="detail.internet_fee" verify="require"  placeholder="请输入赠送网费" class="layui-input"
                   style="width:180px;float:left;">
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">最低段位</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select" style="width:100px;float:left;">
                    <div class="layui-select-title"><input type="text" name='grading' :data='detail.grading'
                                                           placeholder="请选择玩家最低段位" class="layui-input layui-unselect"
                                                           readonly><i
                            class="layui-edge"></i></div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this">请选择</dd>
                        <dd :data='index+1' v-for="(x,index) in grading">{{x}}</dd>
                    </dl>
                </div>
                <label class="layui-form-label" style="width:60px;">最低血量</label>
                <input type="number" v-model="detail.blood_volume" placeholder="最低血量" oninput="if(value>100)value=100"
                       class="layui-input" style="width:130px;float:left;">
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">星级额外奖励</label>
            <div class="layui-inline" style="margin-left: 15px;">
                <button class="layui-btn" id="add_star">新增</button>
            </div>
            <div id="star_details">

            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">段位额外奖励</label>
            <div class="layui-inline" style="margin-left: 15px;">
                <button class="layui-btn" id="add_grade">新增</button>
            </div>
            <div id="grade_details">

            </div>
        </div>

        <div class="layui-form-item verify">
            <label class="layui-form-label">活动时间类型</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-select" style="width:100px;float:left;">
                    <div class="layui-select-title">
                        <input type="text" name='time_type' :data='detail.time_type' :value='detail.time_type'
                               placeholder="请选择活动时间"
                               class="layui-input layui-unselect"verify="require" >
                        <i class="layui-edge"></i>
                    </div>
                    <dl class="layui-anim layui-anim-upbit">
                        <dd class="layui-select-tips layui-this" lay-value="" data='' @click="timeType(this)">请选择</dd>
                        <dd :data='index+1' v-for="(x,index) in time_type" :lay-value="index+1"  @click="timeType(this)">{{x}}</dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选择框</label>
            <div class="layui-input-block">
                <select name="city" lay-verify="required">
                    <option value=""></option>
                    <option value="0">北京</option>
                    <option value="1">上海</option>
                    <option value="2">广州</option>
                    <option value="3">深圳</option>
                    <option value="4">杭州</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item verify time_type_one time_type_hide">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block" style="margin-left: 0px;width:180px;float:left;">
                <input type="text" id='time' name='start_time' placeholder="请选择时间" class="layui-input" readonly>
            </div>
            <label class="layui-form-label" style="margin-left: 0px;width:80px;">结束时间</label>
            <div class="layui-input-block" style="margin-left: 0px;width:180px;float:left;">
                <input type="text" id='times' name='end_time' placeholder="请选择时间" class="layui-input" readonly>
            </div>
        </div>

        <div class="layui-form-item time_type_one time_type_hide">
            <label class="layui-form-label">每周</label>
            <div class="layui-input-block">
                <input type="checkbox" v-for="(x,index) in weeks" :value="index" :name="index" :title="x">
            </div>
        </div>
        <div class="layui-form-item time_type_one time_type_hide">
            <label class="layui-form-label">每月</label>
            <div class="layui-input-block">
                <input type="checkbox" v-for="(name,key) in months" :name="key" :title="name">
            </div>
        </div>
        <div class="layui-form-item time_type_one time_type_hide">
            <label class="layui-form-label">特定日期</label>
            <div class="layui-inline">
                <input type="text" class="layui-input test-item" name="special_date" id="special_date"
                       placeholder="yyyy-MM-dd">
            </div>

        </div>


        <div class="layui-form-item verify">
            <label class="layui-form-label">优先级</label>
            <div class="layui-input-block">
                <input type="text" id='sort' name='sort' value="1" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">是否排位赛</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.is_rank==1}"
                     lay-skin="_switch" @click="radioF1()"><em>{{detail.is_rank==1?'是':'否'}}</em><i></i></div>
            </div>
        </div>
        <div class="layui-form-item verify">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.status==1}"
                     lay-skin="_switch" @click="radioF()"><em>{{detail.status==1?'启用':'停用'}}</em><i></i></div>
            </div>
        </div>
    </div>
    <div class="form-btn" v-if="type!=3">
        <input type="button" value="保存" class="layui-btn" @click="submit">
    </div>
</div>
<script id="" type="text/html">
    <h3>{{ d.title }}</h3>
    <ul>
        {{#  layui.each(d.list, function(index, item){ }}
        <li>
            <span>{{ item.modname }}</span>
            <span>{{ item.alias }}：</span>
            <span>{{ item.site || '' }}</span>
        </li>
        {{#  }); }}
        {{#  if(d.list.length === 0){ }}
        无数据
        {{#  } }}
    </ul>
</script>
<script id="demo" type="text/html">
    {{# layui.each(d.list, function(index, item){     }}
    <div class="star_one">
        <label class="layui-form-label" style="clear: both">星级</label>
        <div class="layui-input-block">
            <div class="layui-unselect layui-form-select" style="width:100px;float:left;">
                <div class="layui-select-title">
                    <input type="text" name='star' :data='detail.star' placeholder="星级"
                           class="layui-input layui-unselect star_one_input" readonly>
                    <i class="layui-edge"></i>
                </div>
                <dl class="layui-anim layui-anim-upbit">
                    <dd class="layui-select-tips layui-this">请选择</dd>
                    <dd :data='index+1' v-for="(x,index) in select">{{x}}</dd>
                </dl>
            </div>
            <label class="layui-form-label">数量</label>
            <input type="number" v-model="detail.num" placeholder="英雄数量" oninput="if(value>8)value=8"
                   class="layui-input star_one_input" style="float:left;">
            <label class="layui-form-label" style="width:100px;">额外赠送网费</label>
            <input type="number" v-model="detail.additional_internet_fee" placeholder="额外赠送网费"
                   class="layui-input star_one_input" style="float:left;">
        </div>
    </div>
    {{# });  }}

</script>
<style type="text/css">
    .form-cont {
        overflow: auto;
    }

    .star_one_input {
        width: 100px;
    }

    .star_one {
        clear: both;
        margin-left: 45px;
    }

    .time_type_hide {
        display: none;
    }

    .time_type_show {
        display: block;
    }
</style>

<script>
    layui.use(['form', 'upload', 'layer', 'laydate'], function () {
        var $ = layui.$
            , form = layui.form, upload = layui.upload, layer = layui.layer, laydate = layui.laydate;
        ;
        form.render();
        // form.verify(layui.admin.verify);
        // var forms = new Vue({
        //     el: '#form',
        //     data: {
        //         role: [],
        //         group: [],
        //         type: layui.admin.objData.type,
        //         detail: {
        //             status: 1,
        //             star: '',
        //             start_time: '',
        //             end_time: '',
        //             is_rank:2,
        //             time_type: ''
        //         },
        //         old_detail: {},
        //         layer: '',
        //         star: '',
        //         time_type_val: '',
        //         select: ['一星', '二星', '三星'],
        //         grading: ['无限制', '无段位', '黑铁', '青铜', '白银', '黄金', '白金', '钻石', '大师', '宗师', '王者'],
        //         time_type: ['每天', '每周', '每月', '特定日期'],
        //         weeks: {
        //             'week[1]': '周一',
        //             'week[2]': '周二',
        //             'week[3]': '周三',
        //             'week[4]': '周四',
        //             'week[5]': '周五',
        //             'week[6]': '周六',
        //             'week[7]': '周日'
        //         },
        //         months: {
        //             'month[1]': 1, 'month[2]': 2, 'month[3]': 3
        //             , 'month[4]': 4
        //             , 'month[5]': 5
        //             , 'month[6]': 6
        //             , 'month[7]': 7
        //             , 'month[8]': 8
        //             , 'month[9]': 9
        //             , 'month[10]': 10
        //             , 'month[11]': 11
        //             , 'month[12]': 12
        //             , 'month[13]': 13
        //             , 'month[14]': 14
        //             , 'month[15]': 15
        //             , 'month[16]': 16
        //             , 'month[17]': 17
        //             , 'month[18]': 18
        //             , 'month[19]': 19
        //             , 'month[20]': 20
        //             , 'month[21]': 21
        //             , 'month[22]': 22
        //             , 'month[23]': 23
        //             , 'month[24]': 24
        //             , 'month[25]': 25
        //             , 'month[26]': 26
        //             , 'month[27]': 27
        //             , 'month[28]': 28
        //             , 'month[29]': 29
        //             , 'month[30]': 30
        //             , 'month[31]': 31
        //         }
        //     },
        //     mounted() {
        //         //初始化
        //         laydate.render({
        //             elem: '#time',
        //             type: 'time'
        //         });
        //         //初始化
        //         laydate.render({
        //             elem: '#times',
        //             type: 'time'
        //         });
        //         //日期选择器
        //         laydate.render({
        //             elem: '#special_date'
        //             //,type: 'date' //默认，可不填
        //         });
        //
        //         var _this = this;
        //
        //
        //         //初始化
        //         if (this.type != 1) this.detail = layui.admin.objData.detail, this.old_detail = JSON.stringify(layui.admin.objData.detail);
        //
        //
        //         $('input[name="star"]').val(this.select[this.detail.star - 1]);
        //         $('input[name="start_time"]').val(this.detail.start_time);
        //         $('input[name="end_time"]').val(this.detail.end_time);
        //         form.render();
        //         //console.log(this.detail)
        //     },
        //     methods: {
        //         timeType: function (dome) {
        //             var _this = this;
        //             var el = event.currentTarget;
        //             var time_type = $(el).attr('data');
        //             var input_time_type = $("input[name='time_type']").attr('data');
        //             $("input[name='time_type']").eq(0).val(time_type);
        //             console.log(time_type);
        //             console.log($("input[name='time_type']").eq(0).val())
        //             _this.time_type_val = time_type;
        //             if (time_type == input_time_type) return false;
        //             $(".time_type_one").removeClass('time_type_show').addClass('time_type_hide');
        //             if (time_type) {
        //                 $(".time_type_one").eq(time_type - 1).removeClass('time_type_hide').addClass('time_type_show');
        //             }
        //         },
        //         radioF: function () {//radio选择
        //             this.detail.status == 1 ? this.detail.status = 2 : this.detail.status = 1;
        //         },
        //         radioF1: function () {//radio选择
        //             console.log(1231231231)
        //             this.detail.is_rank == 1 ? this.detail.is_rank = 2 : this.detail.is_rank = 1;
        //         },
        //         submit: function () {
        //             if (layui.admin.form('#form')) {
        //                 if (this.photos) {
        //                     this.layer = layer.load(1);
        //                     this.upload.upload();
        //                 } else {
        //                     this.submits();
        //                 }
        //             }
        //         },
        //         submits: function () {
        //             if (layui.admin.form('#form')) {
        //                 console.log(this.detail); console.log(1111);
        //                 var time_type=$("input[name='time_type']").val();
        //                 var time_val;
        //                 var data1 = form.val("game_form");
        //                 console.log(data1);return  false;
        //                 switch (time_type){
        //                     case 1:
        //                         time_val=$('input[name="start_time"]').val()+'~'+$('input[name="end_time"]').val();
        //                         break;
        //                     case 2:
        //
        //                         time_val=$('input[name="start_time"]').val()+'~'+$('input[name="end_time"]').val();
        //                         break;
        //                 }
        //                 Object.assign(this.detail, {
        //                     star: parseInt($($("input[name='star']")).attr('data')),
        //                     start_time: $('input[name="start_time"]').val() ? $('input[name="start_time"]').val() : '',
        //                     end_time: $('input[name="end_time"]').val() ? $('input[name="end_time"]').val() : ''
        //                 });
        //
        //                 if (this.type == 2) {   //编辑
        //                     var data = layui.admin.filter(this.detail, JSON.parse(this.old_detail), 'id');
        //                     //console.log(data)
        //                     if (data) {
        //                         layui.admin.formapi('gentinggame/update', data);
        //                     }
        //                 } else {  //添加
        //                     //console.log(this.detail);
        //                     layui.admin.formapi('gentinggame/add', this.detail);
        //                 }
        //             }
        //         }
        //     }
        // })
        $("#add_star").click(function () {
            $("#star_details").append(' <div class="star_one">\n' +
                '        <div class="layui-input-block">\n' +
                '            <div class="layui-unselect layui-form-select" style="width:100px;float:left;">\n' +
                '                <div class="layui-select-title">\n' +
                '                    <input type="text" name=\'star_jiage[]\'  placeholder="单价"\n' +
                '                           class="layui-input layui-unselect star_one_input" readonly>\n' +
                '                    <i class="layui-edge"></i>\n' +
                '                </div>\n' +
                '                <dl class="layui-anim layui-anim-upbit">\n' +
                '                    <dd class="layui-select-tips layui-this">请选择</dd>\n' +
                '                    <dd data=\'1\' >1费</dd>\n' +
                '                    <dd data=\'2\' >2费</dd>\n' +
                '                    <dd data=\'3\' >3费</dd>\n' +
                '                    <dd data=\'4\' >4费</dd>\n' +
                '                    <dd data=\'5\' >5费</dd>\n' +
                '                </dl>\n' +
                '            </div>\n' +
                '            <div class="layui-unselect layui-form-select" style="width:100px;float:left;">\n' +
                '                <div class="layui-select-title">\n' +
                '                    <input type="text" name=\'star[]\'  placeholder="星级"\n' +
                '                           class="layui-input layui-unselect star_one_input" readonly>\n' +
                '                    <i class="layui-edge"></i>\n' +
                '                </div>\n' +
                '                <dl class="layui-anim layui-anim-upbit">\n' +
                '                    <dd class="layui-select-tips layui-this">请选择</dd>\n' +
                '                    <dd data=\'1\' >1星</dd>\n' +
                '                    <dd data=\'2\' >2星</dd>\n' +
                '                    <dd data=\'3\' >3星</dd>\n' +
                '                </dl>\n' +
                '            </div>\n' +
                '            <input type="number" name="num[]" placeholder="英雄数量" oninput="if(value>8)value=8"\n' +
                '                   class="layui-input star_one_input" style="float:left;">\n' +
                '            <input type="number" name="star_fee[]" placeholder="额外赠送网费"\n' +
                '                   class="layui-input star_one_input" style="float:left;">\n' +
                '        </div>\n' +
                '    </div>')
        });
        $("#add_grade").click(function () {
            $("#grade_details").append(' <div class="star_one">\n' +
                '        <label class="layui-form-label" style="clear: both">段位</label>\n' +
                '        <div class="layui-input-block">\n' +
                '            <div class="layui-unselect layui-form-select" style="width:100px;float:left;">\n' +
                '                <div class="layui-select-title">\n' +
                '                    <input type="text" name=\'gradings_extra[]\'  placeholder="段位"\n' +
                '                           class="layui-input layui-unselect star_one_input" readonly>\n' +
                '                    <i class="layui-edge"></i>\n' +
                '                </div>\n' +
                '                <dl class="layui-anim layui-anim-upbit">\n' +
                '                    <dd class="layui-select-tips layui-this">请选择</dd>\n' +
                '                    <dd data=\'3\' >黑铁</dd>\n' +
                '                    <dd data=\'4\' >青铜</dd>\n' +
                '                    <dd data=\'5\' >白银</dd>\n' +
                '                    <dd data=\'6\' >黄金</dd>\n' +
                '                    <dd data=\'7\' >白金</dd>\n' +
                '                    <dd data=\'8\' >钻石</dd>\n' +
                '                    <dd data=\'9\' >大师</dd>\n' +
                '                    <dd data=\'10\' >宗师</dd>\n' +
                '                    <dd data=\'11\' >王者</dd>\n' +
                '                </dl>\n' +
                '            </div>\n' +
                '            <label class="layui-form-label" style="width:100px;">额外赠送网费</label>\n' +
                '            <input type="number" v-name="gradings_fee[]" placeholder="额外赠送网费"\n' +
                '                   class="layui-input star_one_input" style="float:left;">\n' +
                '        </div>\n' +
                '    </div>')
        })
    });
</script>
